<template>
  <div class="app-container">
    <part-comp title="角色管理" class="mb_15"/>
    <div class="mb_15">
        <!-- <el-form :model="queryParams" ref="queryForm" :inline="true" class="formbox whitebg mb_15">
            <el-form-item label="状态：" prop="type">
                <el-select v-model="queryParams.type" size="small" placeholder="请选择状态" @change="handleQuery" style="width:100px">
                    <el-option
                        v-for="dict in typeList"
                        :key="dict.id"
                        :label="dict.name"
                        :value="dict.name"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="用户名：" prop="keyword">
                <el-input v-model="queryParams.username" style="width:130px"
                    placeholder="姓名/电话"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form> -->
        <el-button type="primary" size="mini" @click="handleAdd">新增角色</el-button>
    </div>
    <div class="tablebox whitebg">
        <el-table v-loading="listLoading"
            :data="list"
            class="whitetable">
            <el-table-column label="序号" prop="id" >
                <template slot-scope="scope">
                    <span>{{(queryParams.page - 1) * queryParams.num + scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="角色名称" prop="name" ></el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <div  v-if="scope.row.status==1" ><span class="primarydot"></span><span>正常</span></div>
                    <div v-else><span class="primarydot reddot"></span>禁用</div>
                </template>
            </el-table-column>
            <el-table-column label="人数">
                <template slot-scope="scope">
                    <span>{{scope.row.user_count}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="created_at" label="操作"  fixed="right" width="260">
                <template slot-scope="scope">
                    <div class="flex btnflex">
                        <div class="commhover btn_textblue mb_10" :loading='editloading' @click="handleEdit(scope.row,1)">权限设置</div>
                        <span class="line">|</span>
                        <div class="commhover btn_textred mb_10" @click="handleDelete(scope.row)">删除</div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.num"
            @pagination="getList"
            />
    </div>
    <el-dialog :title="type==1?'新增角色':'权限设置'" :close-on-click-modal='false' :visible.sync="roledialog" width="680px" append-to-body>
        <role-dialog v-if="roledialog" :roletype='type' @close='handleClose' :dataList='dataList' :roleId='roleId'/>
    </el-dialog>
  </div>
</template>

<script>
import { roleList,delRole,getMenuInfo } from '@/api/user'
import PartComp from '@/components/PartComp';
import RoleDialog from './components/RoleDialog.vue';

export default {
    components:{
        RoleDialog,
        PartComp
    },
    data(){
        return {
            typeList:[
                {name:'正常',id:1},
                {name:'禁用',id:0},
            ],
            queryParams:{
                page:1,
                num:10,
                type:'',
                username:''
            },
            listLoading:false,
            list:[{id:1,username:'张三',type:1}],
            total:0,
            roledialog:false,
            type:1,
            roleId:'',
            dataList:{},
            editloading:false,
        }
    },

    created(){
        this.getList();
    },

    methods:{

        getList(){
            this.listLoading=true;
            roleList(this.queryParams).then(res=>{
                this.list = res.data.role;
                this.listLoading=false;
            }).catch(e=>{
                this.listLoading=false;
            })
        },

        handleQuery(){

        },

        resetQuery(){

        },

        handleAdd(){
            this.type = 1;
            this.roledialog=true;
        },

        handleEdit(row){
            this.type = 2;
            this.roleId = row.id;
            this.editloading = true;
            getMenuInfo({id:this.roleId}).then(res=>{
                this.editloading = false;
                if(res.code == 1){
                    this.dataList=res.data;
                    console.log('dataList:',this.dataList);
                    this.roledialog=true;
                }
            }).catch(e=>{
                this.editloading = false;
            })
            
        },

        handleClose(type){
            if(type==1){
                this.getList();
            }
            this.roleId = '';
            this.roledialog = false
        },

        handleDelete(row){
          this.$confirm('确定删除该角色?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            delRole({id:row.id}).then(res=>{
              if(res.code === 1){
                this.$message.success('删除成功');
                this.getList();
              }
            })
          }).catch(() => {
                     
          });
          
        },
    }
}
</script>

<style lang="scss" scoped>
.formbox{
    border-radius: 5px;
    padding: 15px 15px 0 15px;
}
.primarydot{
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  margin-right: 5px;
  background-color: #1168EB;
}
.reddot{
  background-color: #E63737;
}
.btnflex{
    .line{
        display: inline-block;
        margin:0 10px;
    }
}
</style>